<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getAllLists" @change="handleSelectChange">
    </na-table>
    <!-- 查看彩稿   -->
    <el-dialog :title="ops === 'check' ? '查看彩稿' : '审核彩稿'" :visible.sync="showAddDialog" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="70%" @close="closeDialog">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">彩稿单号：</span>{{ colorManuscriptForm.orderNo || "系统自动生成" }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{
              colorManuscriptForm.billCreateTime || dayjs().format("YYYY-MM-DD")
            }}</span>
          <span><span class="mr5">创建人员：</span>{{
              ops === "modify" ? colorManuscriptForm.billCreateBy : name
            }}</span>
        </div>
        <div v-if="defclassName" class="info f16" :class="defclassName">
          <svg-icon :icon-class="defclassName" class="mr10 ml15" />{{
            colorManuscriptForm.checkRemark
          }}
        </div>
        <div class="contain flexs">
          <div class="colorPic flex flex_center">
            <div v-if="picList && picList.length > 0" class="flex flex_center">
              <div class="img_c w100">
                <img class="img_i" style="max-width: 90%" :src="currentItem.draftFilePreviewUrl" alt="" />
              </div>
            </div>
            <el-empty v-else description="暂无彩稿预览图" />
          </div>
          <div class="colorForm flex1">
            <el-form ref="colorManuscriptForm" :model="colorManuscriptForm" label-width="110px" label-position="left"
              class="dialogForm dialogInlineForm p16 serchform" disabled>
              <el-row>
                <!-- <el-col>
                  <el-form-item label="协议书号" prop="agreementNo">
                    <div class="flex flex_center">
                      <div class="flex1">
                        <el-input
                          v-model="colorManuscriptForm.agreementNo"
                          placeholder="请输入内容"
                          size="mini"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col> -->
                <el-col>
                  <el-form-item label="产品名称">
                    <div class="flex flex_center">
                      <div class="flex1">
                        <el-input v-model="colorManuscriptForm.productName" :placeholder="placeholderText" size="mini"
                          disabled class="placehoderColor" />
                      </div>
                      <div class="ml10">
                        <el-button size="mini" icon="el-icon-view" @click="previewPic">预览</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="备注">
                    <div class="flex flex_center">
                      <div class="flex1">
                        <el-input v-model="colorManuscriptForm.applyRemark" placeholder="暂无内容" type="textarea"
                          :autosize="{ minRows: 3, maxRows: 4 }" size="mini" />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="w100 p16 card_main">
              <div v-for="(item, index) in picList" :key="index" class="card"
                :class="{ active: currentIndex === index }" @click="selsectCard(item, index)">
                <div class="card_header flex flex_between">
                  <span>彩稿</span>
                </div>
                <div class="card_info p16 C_999aaa">
                  <div class="c_333333 f16 fw">{{ item.name }}</div>
                  <div>上传时间: {{ item.uploadDate }}</div>
                  <div>文件大小: {{ convertBytes(item.fileSize) }}</div>
                  <div>
                    文件地址: {{ item.fileUrl
                    }}<i class="el-icon-document-copy ml10 f16 pointer" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showAddDialog = false">取 消</el-button>
        <el-button v-if="ops !== 'check'" type="warning" size="mini" @click="refuse">
          {{ btnName }}拒绝</el-button>
        <el-button v-if="ops !== 'check'" type="primary" size="mini" @click="pass">{{ btnName }}通过</el-button>
      </div>
    </el-dialog>
    <!-- 撤审原因   -->
    <el-dialog :title="btnName + '拒绝原因'" :visible.sync="isNopassshow" :close-on-click-modal="false"
      custom-class="comDialog" width="40%" @close="closePassDialog">
      <div class="dialogDody">
        <el-form ref="passForm" :model="passForm" class="dialogForm">
          <el-form-item class="mt12" prop="checkRemark">
            <el-input v-model="passForm.checkRemark" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 6 }"
              size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isNopassshow = false">取 消</el-button>
        <el-button :loading="addLoading" :disabled="addLoading" element-loading-spinner="el-icon-loading" type="primary"
          size="mini" @click="passSave">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    formatbytes
  } from "@/utils";
  import {
    arraySort
  } from "@/utils";
  import {
    mapGetters
  } from "vuex";
  import naTable from "@/components/naTable";
  export default {
    name: "PlaceAnOrder",
    components: {
      naTable
    },
    data() {
      return {
        ops: "revoke", // 彩稿 check refuse revoke examine
        tpisColor: ["", "pass", "refuse", "waitCancel"], // pass waitCancel refuse
        tpisIndex: 0,
        searchLoading: false, // 列表loading
        showAddDialog: false, // 查看弹框是否打开
        isMarterdialog: false, // 协议书号查找
        addLoading: false, // 新建保存加载效果
        headerinfo: "", // 彩稿原因信息
        marLoading: false, // 彩稿订单加载效果
        isNopassshow: false,
        marTotale: 0,
        placeholderText: "选择订单后展示",
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          likeWords: "",
          checkBillState: '-1',
        }, // 彩稿搜索条件
        colorManuscriptForm: {
          orderNo: "",
          billCreateBy: "",
          agreementNo: "",
        }, // 新建彩稿表单
        passForm: {
          checkRemark: "",
        },
        picList: [],
        currentIndex: 0,
        currentItem: null,
        total: 0,
        dataLists: [],
        tableHead: [],
        tableHeight: null,
        currentRow: null,

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'checkBillID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          addPermission: '', //新建按钮权限
          addTitle:'',//新建按钮名称-为空则不显示，为undefine则为新建
          voidWord: '', //需要查询作废的字段
          statusList: [{
              label: '全部',
              value: '-1'
            },
            {
              label: '待审核',
              value: '0'
            },
            {
              label: '已通过',
              value: '1'
            },
            {
              label: '已拒绝',
              value: '2'
            },
            {
              label: '撤审审核',
              value: '3'
            },
            {
              label: '撤审通过',
              value: '4'
            },
            {
              label: '撤审拒绝',
              value: '5'
            }
          ], //状态筛选条件列表
          statusWord:'checkBillState',//状态筛选的字段
          //表格按钮
          operationBtn: [{
              title: '查看', //按钮名称
              methodsName: 'handleClick', //按钮绑定方法的字段
            },
          ],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        }
      };
    },
    computed: {
      ...mapGetters(["name"]),
      btnName() {
        return this.ops === "examine" ?
          "审核" :
          this.ops === "revoke" ?
          "撤审" :
          "";
      },
      defclassName() {
        return this.tpisColor[this.tpisIndex];
      },
    },
    created() {
      // 彩稿上传列表表格表头
      this.getTableHead();
      this.getAllLists();
      this.currentItem = this.picList[0];
    },
    mounted() {
    },
    methods: {
      //  彩稿弹窗
      newAddOrder() {
        this.showAddDialog = true;
      },
      // 文件大小单位换算
      convertBytes(val) {
        return formatbytes(val);
      },

      updateTable(e) {
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      // 查看
      handleClick(row) {
        // this.showAddDialog = true
        this.$router.push({
          path: "/business/colorCheck", // 跳转的路径
          query: {
            checkBillID: row.checkBillID,
          },
        });
        // this.ops = 'check'
        // this.tpisIndex = row.checkBillState
        // this.headerinfo = row.checkRemark
        // // this.colorManuscriptForm = row
        // this.getColorDraftCheckBillDetail(row.checkBillID)
      },
      // 审核
      handleExamine(row) {
        // this.showAddDialog = true
        if (row.checkBillState === 3) {
          this.ops = "revoke";
        } else {
          this.ops = "examine";
        }
        // this.colorManuscriptForm = row
        this.getColorDraftCheckBillDetail(row.checkBillID);
      },
      // 选择某个彩稿
      selsectCard(item, index) {
        this.currentItem = item;
        this.currentIndex = index;
      },
      refuse() {
        this.isNopassshow = true;
        if (this.$refs.passForm) {
          this.$refs.passForm.resetFields();
        }
      },

      handleSelectChange(){
        this.search.pageIndex = 1
        this.getAllLists()
      },
      pass() {
        if (this.colorManuscriptForm.checkBillState === 0) {
          const _data = {
            orderNo: this.colorManuscriptForm.orderNo,
            checkBillID: this.colorManuscriptForm.checkBillID,
            colorDraftNo: this.colorManuscriptForm.colorDraftNo,
            checkResult: true,
            checkRemark: "",
          };
          this.$api.business.ExcuteCheckColorDraft(_data).then((res) => {
            this.showAddDialog = false;
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getAllLists();
          });
        } else if (this.colorManuscriptForm.checkBillState === 3) {
          const _data = {
            orderNo: this.colorManuscriptForm.orderNo,
            checkBillID: this.colorManuscriptForm.checkBillID,
            colorDraftNo: this.colorManuscriptForm.colorDraftNo,
            checkResult: true,
            checkRemark: "",
          };
          this.$api.business.CheckCarefulCheckColorDraft(_data).then((res) => {
            this.showAddDialog = false;
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getAllLists();
          });
        }
      },
      closePassDialog() {},
      passSave() {
        const _data = Object.assign({
            orderNo: this.colorManuscriptForm.orderNo,
            checkBillID: this.colorManuscriptForm.checkBillID,
            colorDraftNo: this.colorManuscriptForm.colorDraftNo,
            checkResult: false,
          },
          this.passForm, {}
        );
        this.$api.business.ExcuteCheckColorDraft(_data).then((res) => {
          this.showAddDialog = false;
          this.isNopassshow = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getAllLists();
        });
      },
      getColorDraftCheckBillDetail(id) {
        const _data = {
          checkBillID: id,
        };
        this.$api.business.QueryColorDraftCheckBillDetail(_data).then((res) => {
          this.showAddDialog = true;
          this.colorManuscriptForm = res.checkBillData;
          // res.files.forEach((item) => {
          //   item.fileName = item.draftFileName
          //   item.fileUrl = item.draftFileUrl
          //   item.fileSize = item.draftFileSize
          //   item.uploadDate = item.uploadTime
          //   item.fileFullUrl = item.draftFilePreview
          //   // item.draftFilePreviewUrls = item.draftFilePreviewUrl
          // })
          // this.picList = res.files
          // this.currentItem = res.files.length > 0 ? res.files[0] : {}
        });
      },
      // 关闭弹框事件
      closeDialog() {
        // 关闭弹框的时候清空数据
        if (this.$refs.colorManuscriptForm) {
          this.$refs.colorManuscriptForm.resetFields();
        }
      },
      // 彩稿预览
      previewPic() {
        if (!this.currentRow) {
          this.$message({
            type: "error",
            message: "请先选择关联订单！",
          });
        }
      },
      // 获取彩稿列表表格表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.checkcolordraftlist,
        };
        this.$api.common.getAllTableHead(parmas).then((res) => {
          res.sort(arraySort("columnSort"));
          this.tableData.thead = res;
        });
      },
      calHeight() {
        this.$nextTick(() => {
          const rect = this.$refs.tableCon.getBoundingClientRect();
          this.tableHeight = rect.height;
        });
      },
      // 彩稿数据列表
      getAllLists() {
        const parmas = this.search;
        this.searchLoading = true;
        this.$api.business
          .QueryPageCheckColorDraftList(parmas)
          .then((res) => {
            this.tableData.tbody = res.list;
            this.search.total = res.totalCount;
            this.searchLoading = false;
          })
          .catch(() => {
            this.searchLoading = false;
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .contain {
    height: 100%;

    .colorPic {
      height: 100%;
      width: 68%;
      overflow: hidden;
      border-right: 1px solid #d8d8d8;

      .img_c {
        text-align: center;

        .img_i {
          max-width: 90%;
        }
      }
    }

    .colorForm {
      .serchform {
        border-bottom: 1px solid #d8d8d8;
      }
    }
  }

  ::v-deep .pic-uploader .el-upload {
    width: 100%;
  }

  ::v-deep .placehoderColor input::placeholder {
    font-weight: bold;
    color: #333333 !important;
  }

  .subTip {
    border-bottom: 1px #e6e6e6 solid;
    background: #f5f6f9;
    padding: 8px 16px;
  }

  .card_main {
    max-height: 340px;
    overflow-y: auto;

    .card {
      border: 1px solid #e6e6e6;
      border-radius: 2px 2px 0px 0px;
      margin-bottom: 8px;

      &.active {
        border: 1px solid #3f61f1;

        .card_header {
          background-color: #3f61f1;
          color: #ffffff;
        }
      }

      .card_header {
        line-height: 32px;
        padding: 6px 16px;
        background-color: #ffffff;
        border-bottom: 1px solid #e6e6e6;
        color: #333333;
      }

      .card_info {
        line-height: 16px;

        div {
          margin-top: 8px;
        }
      }
    }
  }

  .info {
    line-height: 32px;

    &.refuse {
      color: #e13335;
      background-color: #fce6e6;
    }

    &.pass {
      color: #6bc53f;
      background-color: #f1ffea;
    }

    &.waitCancel {
      color: #3f61f1;
      background-color: #dee4ff;
    }
  }

</style>
